@import '../common.less';
.socket-body {
    padding-top: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    border-style: solid;
    border-color: #e6e6e6;
    border-width: 1px 1px 0px 1px;
    border-radius: 5px;
    .message-scroll {
        height: 350px;
        padding: 15px;
        overflow: auto;
        overflow-y: auto;
        overflow-x: hidden;
        margin-bottom: 15px;
        &::-webkit-scrollbar {
            width: 4px;
        }
        &::-webkit-scrollbar-thumb {
            background-color: #dddddd;
            background-clip: padding-box;
            min-height: 28px;
            border-radius: 2px;
            &:hover {
                background-color: #bbb;
            }
        }
        &::-webkit-scrollbar-track-piece {
            background-color: #f8f8f8;
            border-radius: 2px;
        }
        .message {
            margin-top: 10px;
            .message-info {
                height: 30px;
                line-height: 30px;
                .message-icon {
                    float: left;
                    width: 30px;
                    height: 30px;
                    border-radius: 15px;
                }
                .message-name {
                    float: left;
                    margin-left: 5px;
                    margin-right: 5px;
                    font-size: 16px;
                    line-height: 30px;
                }
                .message-sentime {
                    float: left;
                    margin-top: 10px;
                    margin-left: 5px;
                    margin-right: 5px;
                    font-size: 12px;
                    color: #c0c0c0;
                    line-height: 20px;
                }
            }
            .message-content {
                margin-top: 10px;
                margin-left: 35px;
                margin-right: 35px;
                padding: 15px 8px;
                border: 1px solid #e6e6e6;
                border-radius: 5px;
            }
            &.right {
                .message-info {
                    .message-icon {
                        float: right;
                    }
                    .message-name {
                        float: right;
                    }
                    .message-sentime {
                        float: right;
                    }
                }
            }
        }
    }
    .tool {
        border-top: 1px solid #e6e6e6;
        padding: 5px 15px;
    }
    .layui-form {
        .layui-form-item {
            border-width: 0px;
            margin-bottom: 0px;
            .layui-input-block {
                margin-left: 0px;
                padding-right: 100px;
            }
            .layui-form-label {
                left: unset;
                right: 0px;
                border-width: 1px 0px;
                background-color: #009688;
            }
        }
    }
}